<template>
  <el-container class="error-container">
    <el-row type="flex" justify="center">
      <el-col :span="24" :xs="24" :sm="24" :md="24" :lg="24">
        <el-card class="error-card" shadow="hover">
          <div class="icon">
            <el-icon name="error" size="80" class="icon-error"></el-icon>
          </div>
          <h1 class="error-title">404</h1>
          <h2 class="error-subtitle">抱歉，您访问的页面不存在。</h2>
          <el-button
            type="primary"
            size="large"
            class="back-btn"
            @click="goBack"
          >
            返回首页
          </el-button>
        </el-card>
      </el-col>
    </el-row>
  </el-container>
</template>

<script setup>
import { ElButton, ElCard, ElIcon, ElRow, ElCol } from 'element-plus';
import { useRouter } from 'vue-router';

const router = useRouter();

// 跳转到首页
const goBack = () => {
  router.push('/');
};
</script>

<style scoped lang="scss">
.error-container {
  height: 100vh;
  background-color: #f0f4f8;
  display: flex;
  justify-content: center;
  align-items: center;
}

.error-card {
  text-align: center;
  padding: 40px;
  background-color: #1e3a8a;
  color: white;
  border-radius: 12px;
}

.icon-error {
  color: white;
}

.error-title {
  font-size: 80px;
  margin: 20px 0;
}

.error-subtitle {
  font-size: 18px;
}

.back-btn {
  margin-top: 20px;
  background-color: #3b82f6;
  border-color: #3b82f6;
  border-radius: 5px;
}

@media (max-width: 768px) {
  .error-title {
    font-size: 60px;
  }

  .error-subtitle {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .error-title {
    font-size: 50px;
  }

  .error-subtitle {
    font-size: 14px;
  }
}
</style>
